<template>
  <li>
    <p class="title">
      <span>{{num}}.</span>{{title}}
    </p>
    <p v-for="(item,index) in option" :key="index">
      <el-radio v-model="answer" :label="item" :disabled="type == 'readonly'">{{String.fromCharCode(65 + index) + ". " + item}}</el-radio>
    </p>
    <div v-if="type == 'readonly'" style="background-color: #f3f3f3;padding: 20px">
      <p>正确答案：{{data.trueAnswer}}</p>
      <p>你的答案：{{data.userAnswer}}</p>
      <p>描述：{{data.expound}}</p>
    </div>
    <el-divider></el-divider>
  </li>
</template>

<script>
export default {
    props:["data","num", "lastAnswer"],
    data() {
        return {
            // 将刷新前的数据进行赋值
            answer: this.lastAnswer,
            type: this.$route.query.type,

        }
    },
  created() {

  },

  watch: {
      answer: function(val) {

        const temp = {
          index: Number(this.num) - 1,
          data: val,
        }
        this.$store.commit("saveAnswerChoice", temp);
      }
    },
    computed: {
        title() {
            return this.data.title.split("###")[0];
        },
        option() {
            let temp = this.data.title.split("###");
            return temp[1].split("#");
        }
    }
};
</script>

<style lang="scss" scoped>
li {
  list-style: none;
  .title {
    span {
      color: #63b1fe;
    }
  }
  p {
    padding-left: 15px;
  }
}
</style>
